//  signup页布局
.signup {
  background-image: url(./../imgs/sign_up_bg.png);
  background-repeat: no-repeat;
  background-color: #b8e5f8;
  background-size: cover;
  height: 100vh;
  overflow: auto;
  padding-right: 15px;
  .signup-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    min-height: 688px;
    height: calc(100% - 42px);
    box-sizing: border-box;
    
    .download {
      margin-top: 30px;
      background: #8590A6;
      border: none;
      color: #FFFFFF;
      width: 432px;
      height: 42px;
    }
  }
  .signup-footer {
    font-size: 12px;
    line-height: 21px;
    text-align: center;
    color: #FFFFFF;
    text-shadow: 0 1px 2px #999999;
    a {
      color: inherit;
      text-decoration: none;
    }
    .ZhihuIntegrity {
      border-top: #EBEBEB 1px solid;
      width: 420px;
      margin: 10px auto;
      padding-top: 10px;
    }
  }
}
//  signup核心
.signup-content {
  overflow: visible;
  width: 432px;
  text-align: center;
  .el-card__body {
    padding: 0 !important;
  }
  img {
    margin: 15px 0 0 0;
    height: 65px;
  }
  .slogen {
    margin-top: 15px;
    color: #0084FF;
    font-size: 22px;
  }
  form {
    margin: 20px 0 0 0;
    padding: 0 30px;
    .area-select {
      width: 110px;
    }
    .others {
      margin: 0 0 10px 0;
      height: 20px;
      display: flex;
      justify-content: space-between;
      background: #FFFFFF;
      span {
        font-size: 13px;
        height: auto;
        padding: 0;
        line-height: inherit;
        background-color: transparent;
        border: none;
        border-radius: 0;
      }
    }
    .submit-btn {
      width: 100%;
    }
    // .no-label {
    //   .el-form-item__content {
    //     margin-left: 0px !important;
    //   }
    // }
  }
  .register-footer {
    display: flex;
    justify-content: space-between;
  }
  .login-footer {
    display: block;
  }
  .footer {
    padding: 0 30px 18px;
    font-size: 13px;
    margin-top: 16px;
    line-height: 25px;
    span {
      color: #8590A6;
      a {
        color: #8590A6;
        text-decoration: none;
      }
    }
    a {
      color: #175199;
    }
  }
  .switcher {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background-color: #F6F6F6;
    height: 58px;
    border-top: 1px solid #EBEBEB;
    font-size: 16px;
    span {
      color: #175199;
      cursor: pointer;
    }
  }
}

//  main-header
.main-header {
  position: relative;
  z-index: 100;
  min-width: 1032px;
  overflow: hidden;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(26, 26, 26, 0.1);
  background-clip: content-box;
  .header-content {
    position: relative;
    display: flex;
    width: 1000px;
    height: 52px;
    padding: 0 16px;
    margin: 0 auto;
    align-items: center;
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
    .logo {
      height: 35px;
    }
    .search {
      width: 300px;
    }
    .userInfo {
      flex: 1;
      justify-content: flex-end;
      display: flex;
      align-items: center;
      .icon-item {
        font-size: 20px;
      }
      .avatar {
        width: 20px;
      }
    }
  }
}

// editor-header
.editor-header {
  position: relative;
  z-index: 100;
  min-width: 1032px;
  height: 52px;
  overflow: hidden;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(26, 26, 26, 0.1);
  background-clip: content-box;
  display: flex;
  .logo-wrapper {
    position: absolute;
    top: 0;
    left: 20px;
    align-self: stretch;
    justify-content: center;
    align-items: center;
    float: left;
    height: inherit;
    display: inherit;
    .logo {
      height: 35px;
    }
  }
  .header-content {
    margin: 0 auto;
    width: 660px;
    display: flex;
    flex-direction: row;
    align-items: center;
    white-space: nowrap;
    text-align: left;
    .title {
      font-weight: 600;
      color: #333;
      margin-right: 20px;
    }
  }
  .functions {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    height: inherit;
  }
  .userInfo {
    flex: 1;
    justify-content: flex-end;
    display: flex;
    align-items: center;
    .icon-item {
      font-size: 20px;
    }
    .avatar {
      width: 20px;
    }
  }
}
//  主页布局
.home {
  .main-content {
    display: flex;
    align-items: flex-start;
    width: 1000px;
    padding: 0 16px;
    margin: 10px auto;
    .list {
      flex-shrink: 0;
      margin-right: 10px;
      margin-bottom: 0;
      width: 694px;
      .listNav {
        a {
          text-decoration: none;
        }
      }
      .card-content {
        .hot {
          background: #FFFFFF;
          display: flex;
          padding: 10px 0 10px 0;
          position: relative;
          .hotItem-rank {
            padding-top: 5px;
            text-align: left;
            width: 30px;
            height: 105px;
            line-height: 1.6;
            font-size: 18px;
            font-weight: 600;
            font-synthesis: style;     
            float: left;
            .frontRank {
              color: #FF9607;
            }
            .backRank {
              color: #999999;
            }
          }
          .hotItem-content {
            text-align: left;
            width: 400px;
            float: left;
            margin-right: 10px;
            a {
              color: inherit;
              text-decoration: none;
              .hotItem-title {
                color: #1A1A1A;
                font-size: 18px;
                line-height: 28px;
                max-height: 56px;
                display: -webkit-box;
                text-overflow: ellipsis;
                overflow: hidden;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                font-weight: 600;
                margin: 0 0 5px 0;                
              }
              .hotItem-excerpt {
                color: #444444;
                line-height: 25px;
                margin: 2px;
                min-height: 25px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              .hotItem-excerpt-multiLine {
                max-height: 50px;
                white-space: normal;
                display: -webkit-box;
                text-overflow: ellipsis;
                overflow: hidden;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
              }
            }
          }
          .hotItem-img {
            display: block;
            height: 105px;
            position: relative;
            img {
              width: 190px;
              height: 105px;
              display: block;
              -o-object-fit: cover;
              object-fit: cover;
              border-radius: 4px;
            }
          }
        }
      }
    }
    .sidebar {
      flex: 1;
      font-size: 14px;
      .wrapper {
        display: flex;
        justify-content: left;
        flex-wrap: wrap;
        .icon-item {
          align-items: center;
          cursor: pointer;
          display: flex;
          flex-direction: column;
          margin: 20px 0;
          width: 33%;
        }
        .thunder-btn {
          &:hover {
            color: #FECE2F;
          }
          span {
            color: #FECE2F;
          }
        }
        .book-btn {
          &:hover {
            color: #4BD383;
          }
          span {
            color: #4BD383;
          }
        }
        .desk-btn {
          &:hover {
            color: #0084FF;
          }
          span {
            color: #0084FF;
          }
        }
        .pen-btn {
          &:hover {
            color: #1E8AE8;
          }
          span {
            color: #1E8AE8;
          }
        }
        .money-btn {
          &:hover {
            color: #5482F0;
          }
          span {
            color: #5482F0;
          }
        }
        .normal-btn {
          &:hover {
            color: #165199;
          }
        }
      }
    }
  }
}

// 编辑页面
.editor {
  .content {
    width: 660px;
    margin: 0 auto;
    .oldImg {
      width: 100%;
      border-radius: 10px;
    }
  }
}

// 问题详情页
.question-details {
  .question-header {
    position: relative;
    min-width: calc(1000px + 16px * 2);
    padding: 16px 0;
    overflow: hidden;
    background: #FFFFFF;
    box-shadow: 0 1px 3px rgba(26, 26, 26, 0.1);
    .question-header-content {
      display: flex;
      justify-content: space-between;
      width: 1000px;
      height: 100%;
      padding: 0 16px;
      margin: 0 auto;
      .question-header-main {
        width: 694px;
        padding-left: 20px;
        box-sizing: border-box;
        text-align: left;
        .question-header-topic {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          align-items: center;
          margin-right: -5px;
          padding: 1px 0;
          span {
            margin: 0 5px;
          }
        }
        .question-header-title {
          margin-top: 12px;
          margin-bottom: 4px;
          font-size: 22px;
          font-weight: 600;
          font-synthesis: style;
          line-height: 32px;
          color: #1A1A1A;
        }
        .question-header-details {
          font-size: 15px;
          line-height: 25px;
        }
      }
      .question-header-side {
        width: 296px;
        padding-right: 20px;
        text-align: right;
        margin: 20px 10px 0 0;
        .question-header-side-item {
          text-align: center;
          float: right;
          padding: 0 10px;
          .name {
            font-size: 14px;
            color: #8590A6;
            margin: 0;
            font-weight: 600;
          }
          .num {
            display: inline-block;
            font-size: 18px;
            color: #1A1A1A;
            font-weight: 600;
            margin: 10px 0 0 0;
          }
        }
        .question-header-side-item:nth-child(2) {
          border-right: 1px solid #EBEBEB;
        }
      }
    }
    .question-header-footer {
      padding-bottom: 12px;
      margin-top: 4px;
      margin-bottom: -12px;
      background: #FFFFFF;
      .question-header-footer-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 950px;
        height: 100%;
        padding: 0 16px;
        margin: 0 auto;
        .question-header-footer-main {
          display: flex;
          align-items: center;
          margin-top: 4px;
          min-width: 694px;
          width: auto;
          .question-header-btnGroup {
            display: inline-block;
            margin: 0 -8px;
          }
          .question-header-actions {
            display: inline-block;
            margin: 0 0 0 20px;
            .button {
              float: left;
            }
            .actions {
              float: left;
            }
          }
        }
      }
    }
  }
  .question-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin: 10px auto;
    padding: 0 16px;
    width: 1000px;
    min-height: 100vh;
    .question-main-clo {
      width: 694px;
      padding-bottom: 20px;
      .el-card__body {
        padding: 0 30px !important;
        .list {
          .list-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 50px;
            border-bottom: 1px solid #F6F6F6;
            box-sizing: border-box;
            span {
              margin: 0;
              font-weight: 600;
            }
          }
          .list-item {
            border-bottom: 1px solid #F6F6F6;
          }
        }
      }
      .author-info {
        font-size: 15px;
        color: #646464;
        margin: 15px 0 10px;
        img {
          width: 38px;
          height: 38px;
          float: left;
        }
        .detail {
          float: left;
          margin-left: 15px;
          text-align: left;
          p {
            margin: 0;
          }
          .username {
            font-weight: 600;
            color: #000000;
          }
          .introduce {
            font-size: 14px;
          }
        }
      }
      .extra-info {
        text-align: left;
        font-size: 14px;
        font-weight: 500;
        color: #8590A6;
      }
      .content {
        text-align: left;
        margin: 5px 0;
      }
      .actions {
        margin: 10px 0 15px;
        text-align: left;
      }
    }
  }
  .question-main-sidebar {
    width: 296px;
    .el-card__body {
      padding: 10px 20px !important;
      .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #F6F6F6;
        box-sizing: border-box;
        margin-bottom: 10px;
        padding: 5px 0 15px;
        font-weight: 600;
      }
      .content {
        .content-item {
          font-size: 14px;
          text-align: left;
          margin-top: 10px;
          a {
            display: inline;
            color: #175199;
            font-weight: 450;
            &:hover {
              border-bottom: 1px solid #175199;
            }
          }
          span {
            font-weight: 450;
            color: #8590A6;
          }
        }
      }
    }
  }
}

// 个人中心
.profile {
  position: relative;
  width: 1000px;
  margin: 10px auto;
  .el-card__body {
    padding: 0 !important;
    .profile-header-cover {
      position: relative;
      height: 240px;
      overflow: hidden;
      background: #F6F6F6;
      border-top-right-radius: 1px;
      border-top-left-radius: 1px;
      transition: height 0.3s;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .profile-header-wrapper {
      position: relative;
      width: 100%;
      background: #FFFFFF;
      box-sizing: border-box;
      padding: 0 20px 24px;
      .avatar {
        position: absolute;
        top: -57px;
        left: 20px;
        z-index: 1;
        border-radius: 10px;
        background: #FFFFFF;
        padding: 4px;
        img {
          cursor: pointer;
          width: 160px;
          height: 160px;
          border-radius: 5px;
        }
        .img-hover-tip {
          cursor: pointer;
          position: absolute;
          top: 25%;
          left: 20%;
          i {
            display: block;
            font-size: 20px;
            margin-bottom: 5px;
          }
        }
        &:hover {
          .img-hover-tip {
            display: block;
          }
        }
      }
      .content {
        padding-top: 16px;
        padding-left: 32px;
        border-left: 164px solid transparent;
        text-align: left;
        .username {
          font-size: 26px;
          font-weight: bold;
          font-synthesis: style;
          line-height: 30px;
          margin: 0;
        }
        .content-header {
          .introduce {
            font-size: 18px;
            white-space: nowrap;
            word-break: break-word;
            line-height: 1.6;
            font-weight: 500;
            margin: 10px 0 0 0;
          }
        }
        .content-edit {
          padding: 0;
          li {
            list-style-type: none;
            span {
              float: left;
              line-height: 40px;
            }
            .el-input {
              float: left;
              width: 70%;
            }
          }
        }
        .sex {
          margin-top: 10px;
          color: #8590A6;
        }
        .details {
          margin-top: 10px;
          position: relative;
          width: 524px;
          .item {
            display: flex;
            margin-bottom: 18px;
            .type {
              width: 60px;
              margin-right: 37px;
              font-weight: 600;
              font-size: 14px;
              line-height: 1.8;
              color: #1A1A1A;
            }
            .info {
              flex: 1;
              overflow: hidden;
            }
          }
        }
        .btn-group {
          position: absolute;
          right: 20px;
          bottom: 24px;
        }
      }
    }
  }
}
.profile-main {
  display: flex;
  width: 1000px;
  min-height: 100vh;
  padding: 0 16px;
  margin: 10px auto;
  justify-content: space-between;
  align-items: flex-start;
  .profile-content {
    width: 694px;
  }
  .profile-sidebar {
    width: 296px;
    color: #646464;
    text-align: left;
    .achievement {
      .list-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 0 10px 0;
        border-bottom: 1px solid #F6F6F6;
        box-sizing: border-box;
        font-weight: 600;
        color: #646464;
      }
      .list-item {
        font-size: 15px;
        font-weight: 500;
        color: #646464;
        .title {
          span {
            color: #8590A6;
          }
          .side-padding {
            padding: 0 5px;
          }
        }
        .info {
          text-indent: 32px;
          font-size: 14px;
          color: #8590A6;
        }
      }
      .list-item:last-child {
        .title {
          p {
            margin-bottom: 0;
          }
        }
      }
    }
    .followship {
      margin: 10px 0;
      .el-card__body {
        padding: 0 !important;
        .numberBoard {
          display: flex;
          .item {
            border: 0;
            line-height: unset;
            font-size: unset;
            text-align: center;
            padding: 12px 0;
            width: 50%;
            .text {
              font-size: 14px;
              color: #8590A6;
              font-weight: 500;
              margin-top: 0 !important;
            }
            .num {
              display: inline-block;
              font-size: 18px;
              color: #1A1A1A;
              font-weight: 600;
              font-synthesis: style;
            }
          }
          .item:nth-child(1) {
            border-right: 1px solid #EBEBEB;
          }
        }
      }
    }
  }
}

//  回答详情
.answer-main {
  padding-bottom: 10px;
  border-bottom: 1px solid #F6F6F6;
  margin-bottom: 10px;
  .title {
    text-align: left;
    margin-bottom: 10px;
    h2 {
      font-size: 18px;
      font-weight: 600;
      font-synthesis: style;
      line-height: 1.6;
      color: #1A1A1A;
      margin-top: -4px;
      margin-bottom: -4px;  
    }
  }
  .creator-info {
    font-size: 15px;
    color: #646464;
    margin: 15px 0 10px;
    img {
      width: 38px;
      height: 38px;
      float: left;
    }
    .detail {
      float: left;
      margin-left: 15px;
      text-align: left;
      p {
        margin: 0;
      }
      .username {
        font-weight: 600;
        color: #000000;
      }
      .introduce {
        font-size: 14px;
      }
    }
  }
  .vote {
    text-align: left;
    margin: 10px 0;
    color: #8590A6;
    font-weight: 500;
  }
  .content-wrapper {
    overflow: hidden;
    .shortCut {
      .cover {
        width: 190px;
        height: 105px;
        float: left;
        margin-right: 20px;
        border-radius: 20px;
        img {
          display: inline-block;
          position: relative;
          width: auto;
          height: auto;
          max-width: 100%;
          margin-top: -10%;
          margin-right: 18px;
          margin-bottom: 4px;
          overflow: hidden;
          background-position: center;
          background-size: cover;
          border-radius: 6px;
          -webkit-transform: translate3d( 0, 0, 0 );
          transform: translate3d( 0, 0, 0 );
        }
      }
      .experct {
        text-align: left;
      }
    }
    .content {
      text-align: left;
      img {
        width: 100%;
      }
    }
  }
  .actions {
    text-align: left;
    margin-top: 10px;
  }
}

// 提问列表
.asks {
  text-align: left;
  margin: 10px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #F6F6F6;
  h2 {
    font-size: 18px;
    font-weight: 600;
    font-synthesis: style;
    line-height: 1.6;
    color: #1A1A1A;
    margin-top: -4px;
    margin-bottom: -4px;
  }
  .question-info {
    display: block;
    margin-top: 5px;
    color: #8590A6;
    font-size: 15px;
    font-weight: 500;
  }
}

// 提问模块
.ask-model {
  .with-border {
    border: 1px solid #dcdfe6;
    border-radius: 5px;
  }
}

//  文章详情页面
.article-details {
  background-color: white;
  height: 100%;
  .article-wrapper {
    width: 700px;
    margin: 0 auto;
    text-align: left;
    .cover {
      img {
        width: 100%;
      }
    }
    .author-info {
      .avatar {
        float: left;
        img {
          width: 38px;
          height: 38px;
          border-radius: 50%;
        }
      }
      .userinfo {
        flex: 1;
        margin-left: 50px;
        overflow: hidden;
        text-align: left;
        p {
          margin: 0;
        }
        .username {
          font-weight: 600;
          color: #444444;
        }
      }
    }
    .content {
      text-align: left;
      img {
        width: 100%;
      }
    }
  }
}

//  评论列表
.comment-list {
  .comment-part {
    .comment-input {
      width: 70%;
      float: left;
    }
    .comment-btn {
      width: 20%;
      float: right;
    }
  }
}

//  评论操作
.comment-actions {
  .hover-hidden {
    visibility: hidden;
  }
  &:hover{
    .hover-hidden {
      visibility: visible;
    }
  }
}